<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center; gap: 2px">
        <el-input
          v-model="searchDTO.projectName"
          clearable
          style="width: 150px; border-radius: 5px"
          placeholder="请输入题目"
        />
        <el-select
          v-model="searchDTO.status"
          placeholder="请选择审核状态"
          style="width: 150px"
          clearable
        >
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="审核通过" :value="1"></el-option>
          <el-option label="审核未通过" :value="2"></el-option>
        </el-select>
        <el-button icon="search" @click="getList" type="success"></el-button>
      </div>
    </div>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogAdd"
      v-model:form-params="addDTO"
      :rules="ProjectApplicationRules.addRules"
      :item-config="ProjectApplicationParams.formColumn"
      :title="'添加选题申请表'"
      :width="'50%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAdd"
    >
    </CommonDialogForm>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogUpdate"
      v-model:form-params="auditDTO"
      :rules="ProjectApplicationRules.updateRules"
      :item-config="ProjectApplicationParams.formColumn"
      :title="'审核申请'"
      :width="'30%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAudit"
    >
    </CommonDialogForm>
    <CommonDialog
      title="审核申请详细"
      v-model:visible="showAuditDialog"
      :width="'20vw'"
      :close-tips="false"
      :has-footer="false"
      v-model:has-loading="loading"
    >
      <el-form label-width="100px" v-model="showDetailBO">
        <el-form-item label="题目名称">{{ showDetailBO.projectName }}</el-form-item>
        <el-form-item label="教师名称">{{ showDetailBO.teacherName }}</el-form-item>
        <el-form-item label="学生名称">{{ showDetailBO.studentName }}</el-form-item>
        <el-form-item label="申请时间">{{ showDetailBO.applyTime }}</el-form-item>
        <el-form-item label="审核人员">{{ showDetailBO.reviewName }}</el-form-item>
        <el-form-item label="审核时间">{{ showDetailBO.reviewTime }}</el-form-item>
        <el-form-item label="审核意见">{{ showDetailBO.reviewComment }}</el-form-item>
        <el-form-item label="审核状态">
          <el-tag
            :type="
              showDetailBO.status == 0 ? 'info' : showDetailBO.status == 1 ? 'success' : 'danger'
            "
          >
            {{
              showDetailBO.status == 0
                ? '待审核'
                : showDetailBO.status == 1
                  ? '审核通过'
                  : '审核未通过'
            }}
          </el-tag>
        </el-form-item>
      </el-form>
    </CommonDialog>

    <CommonPageTable
      :table-column="ProjectApplicationParams.tableColumn"
      :table-data="searchVO"
      :table-loading="loading"
      :table-attribute="{
        'empty-text': '暂无数据',
        height: TableEnum.height,
      }"
      :page-params="searchDTO.page"
      :page-attribute="{
        size: 'small',
        pageSizes: [10, 20, 50, 100],
        layout: ' total, sizes, prev, pager, next, jumper',
      }"
      @search="getList"
      @audit="audit"
      @showDetail="showDetail"
    />
  </div>
</template>

<script setup lang="ts">
//----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { ResultPageType } from '@/resources/interface/ResultTypes'
import CommonPageTable from '@/components/CommonPageTable.vue'
import { TableEnum } from '@/enums/TableEnum'
import CommonDialogForm from '@/components/CommonDialogForm.vue'
import CommonDialog from '@/components/CommonDialog.vue'
import ObjectUtils from '@/utils/ObjectUtils'
import { ProjectApplicationApi } from '@/apis/api/projectApplication/ProjectApplicationApi'
import { ProjectApplicationParams } from '@/resources/parameters/projectApplication/ProjectApplicationParameters'
import type {
  AuditApplicationDTOType,
  ProjectApplicationAddDTOType,
  ProjectApplicationSearchDTOType,
  ProjectApplicationSearchVOType,
} from '@/resources/interface/projectApplication/ProjectApplicationTypes'
import { ProjectApplicationRules } from '@/resources/rules/projectApplication/ProjectApplicationRules'
import ElementUtil from '@/utils/ElementUtil'

//----------------------------------数据区---------------------------------
const loading = ref(false)
const showAuditDialog = ref(false)
const dialogAdd = ref(false)
const dialogUpdate = ref(false)
const searchDTO = reactive<ProjectApplicationSearchDTOType>({
  ...ProjectApplicationParams.searchDTO,
})
const searchVO = ref<ResultPageType>()
let addDTO = reactive<ProjectApplicationAddDTOType>({ ...ProjectApplicationParams.addDTO })
let auditDTO = reactive<ProjectApplicationSearchVOType>({ ...ProjectApplicationParams.searchVO })
let showDetailBO = reactive<ProjectApplicationSearchVOType>({
  ...ProjectApplicationParams.searchVO,
})
// ----------------------------------方法区--------------------------------

const showDetail = async (params: ProjectApplicationSearchVOType) => {
  showAuditDialog.value = true
  loading.value = true
  showDetailBO = reactive(ObjectUtils.copy(params, showDetailBO))

  loading.value = false
}

/**
 * 添加 选题申请表 前置
 */
const add = async () => {
  dialogAdd.value = true
}
/**
 * 添加 选题申请表 回调
 * @param params 表单数据
 */
const onAdd = async (params: ProjectApplicationAddDTOType) => {
  await ProjectApplicationApi.add(params)
  loading.value = false
  await getList()
  ObjectUtils.resetObject(addDTO, ProjectApplicationParams.addDTO)
}
/**
 * 更新 选题申请表 前置
 * @param vo 选中数据
 */
const audit = (vo: ProjectApplicationSearchVOType) => {
  auditDTO = reactive(ObjectUtils.copy(vo, auditDTO))
  dialogUpdate.value = true
}
/**
 * 审核申请 回调
 */
const onAudit = async () => {
  const auditBO: AuditApplicationDTOType = {
    id: auditDTO.id,
    reviewComment: auditDTO.reviewComment,
    status: auditDTO.status,
  }
  await ProjectApplicationApi.audit(auditBO)
  await getList()
}
/**
 * 删除 选题申请表
 * @param vo 选中数据
 */
const remove = async (vo: ProjectApplicationSearchVOType) => {
  if (await ElementUtil.openBox({ content: '是否删除,删除后不可恢复！' })) {
    await ProjectApplicationApi.delete(Array.of(vo.id))
    await getList()
  }
}
/**
 * 获取 选题申请表 列表
 */
const getList = async () => {
  loading.value = true
  const result = await ProjectApplicationApi.search(searchDTO)
  searchVO.value = result.data
  loading.value = false
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
